<template>
  <div class="k-btn-wrap clear-fix">
    <ul class="sy-ul num-ul fl">
      <li
        v-for="(row, index) in cp_board"
        :key="index"
        class="k-block"
        :class=" 'k-block-' + row.length "
      >
        <div
          v-for="(col, idx) in row"
          :key="idx"
          class="clear-fix k-row-syllable"
          :class=" 'k-row-' + row.length "
        >
          <span
            v-for="(btn, i) in col"
            :key="i"
            class="fl k-btn k-btn-9"
            :class="['k-' + btn.type, {active: active === `${index}_${idx}_${i}`}]"
            @touchend.stop="btnClick($event, btn)"
            @mouseup.stop="btnClick($event, btn)"
            @touchstart.stop="touchStart(`${index}_${idx}_${i}`, $event)"
            @mousedown.stop="mouseDown(`${index}_${idx}_${i}`, $event)"
            @touchmove.stop="touchMove"
            @mousemove.stop="mouseMove"
          >{{ btn.view || btn.text }}
            <span class="k-btn-bg" />
          </span>
        </div>
      </li>
    </ul>
    <ul class="fr sym-ul sym-pad fr">
      <li
        v-for="(row, idx) in cp_large"
        :key="idx"
        class="k-row"
        :class="{['k-row-' + cp_large.length]: 1}"
      >
        <template v-for="(btn, i) in row">
          <span
            v-if="btn.expect === 'delete'"
            :key="i"
            class="k-btn"
            :class="['k-' + btn.type, 'k-btn-' + cp_large[0].length, {active: active === `r_${idx}_${i}`}]"
            @touchstart.stop="deleteClick($event, btn, `r_${idx}_${i}`)"
            @touchend.stop="pressUp"
            @mousedown.stop="deleteClick($event, btn, `r_${idx}_${i}`)"
            @mouseup.stop="pressUp"
            @click.stop="pressClick($event, btn)"
          ><span class="k-btn-bg" /></span>
          <span
            v-else
            :key="i"
            class="k-btn"
            :class="['k-' + btn.type, 'k-btn-' + cp_large[0].length, {active: active === `r_${idx}_${i}`, disable: disableBtn.indexOf(btn.expect) > -1}]"
            @touchstart.stop="symStart(`r_${idx}_${i}`, $event)"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="symStart(`r_${idx}_${i}`, $event)"
            @mouseup.stop="btnClick($event, btn)"
          >{{ btn.view || btn.text }}</span>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import syllable from '../json/syllable';
import { KeepPress } from './index';
import { $debounce, browerEnv } from './utils';

export default {
    name: 'ChineseSyllable',
    props: {
        boardData: {
            type: Object,
        },
        disableBtn: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data () {
        let press = new KeepPress();
        return {
            syllable: syllable,
            pressDown: press.down(($event, data) => {
                this.active = '';
                this.$emit('keep-press', $event, data);
            }, 1000),
            pressUp: press.up((e) => {
                if (this.mobile) {
                    let { type } = e || window.event;
                    if (type.match(/mouse/g)) {
                        return false;
                    }
                }
                this.active = '';
                this.$emit('btn-click', e, {
                    'text': '删除',
                    'type': 'symbol delete',
                    'expect': 'delete',
                });
            }),
            pressClick: press.click(($event, data) => {
                if (this.mobile) {
                    let { type } = $event || window.event;
                    if (type.match(/mouse/g)) {
                        return false;
                    }
                }
                this.active = '';
                this.$emit('btn-click', $event, data);
            }),
            touchMove: $debounce(({ touches }) => {
                let { clientX, clientY } = touches[0];
                let { x, y } = this.touche;
                if (Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10) {
                    this.defaultClick = true;
                    this.active = '';
                }
            }, 40, 'fixed', true),
            mouseMove: $debounce((e) => {
                let { clientX, clientY } = e;
                let { x, y } = this.touche;
                if (Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10) {
                    this.defaultClick = true;
                    this.active = '';
                }
            }, 40, 'fixed', true),
            active: '',
            select: 0,
            touche: { x: 1, y: 0 },
            defaultClick: false,
            mobile: browerEnv().android || browerEnv().ios,
        };
    },
    computed: {
        cp_board () {
            return Object.values(this.syllable).map(item => {
                let arr = [], all = [];
                if (Array.isArray(item)) {
                    all = item.map(v => {
                        return {
                            text: v,
                            type: 'symbol spell',
                        };
                    });
                } else {
                    all = Object.keys(item).map(v => {
                        return {
                            text: v,
                            type: 'symbol spell',
                            expect: 'syllable',
                        };
                    });
                }
                Array.from({ length: Math.ceil(all.length / 9) }).forEach((v, i) => {
                    arr.push(all.slice(i * 9, i * 9 + 9));
                });
                return arr;
            });
        },
        cp_large () {
            return this.boardData.keysText.large;
        },
    },
    methods: {
        btnClick ($event, count) {
            if (this.mobile) {
                let { type } = $event || window.event;
                if (type.match(/mouse/g)) {
                    return false;
                }
            } else {
                let { type } = $event || window.event;
                if (type.match(/touch/g)) {
                    return false;
                }
            }
            if (this.defaultClick) return;
            this.active = '';
            this.$emit('btn-click', $event, count);
        },
        deleteClick ($event, btn, cls) {
            if (this.mobile) {
                let { type } = $event || window.event;
                if (type.match(/mouse/g)) {
                    return false;
                }
            }
            this.active = cls;
            this.defaultClick = false;
            this.pressDown($event, btn);
        },
        symStart (arg, $event) {
            if (this.mobile) {
                let { type } = $event || window.event;
                if (type.match(/mouse/g)) {
                    return false;
                }
            }
            this.active = arg;
            this.defaultClick = false;
        },
        touchStart (p = '', { touches: { 0: { clientX: x, clientY: y } } }) {
            Object.assign(this.touche, { x, y });
            this.active = p;
            this.defaultClick = false;
        },
        mouseDown (p = '', { clientX: x, clientY: y, type }) {
            if (this.mobile) {
                if (type.match(/mouse/g)) {
                    return false;
                }
            }
            Object.assign(this.touche, { x, y });
            this.active = p;
            this.defaultClick = false;
        },
        navClick (idx) {
            if (this.defaultClick) return;
            this.select = idx;
        },
    },
};
</script>

<style scoped lang="scss">
  .k-btn-wrap {
    padding: 0;
    .spell {
      font-family: 'customFont', 'customFont1', 'customFont2', "Microsoft YaHei", "sans serif", "Tahoma", "Helvetica", "Arial", 'spe-symbol';
    }
  }

  .num-ul {
    width: calc((100% - 64px) / 8 * 7 + 52px);
    height: 100%;
    overflow-y: auto;
    padding: 4px 0 8px 10px;
    .k-block {
      background: #fff;
      border-radius: 8px;
      .k-symbol {
        background: transparent;
        box-shadow: none;
        &:active {
          background-color: #13d098;
        }
      }
    }
    .k-block + .k-block {
      margin-top: 8px;
    }
    .k-block-4 {
      height: calc((200% - 80px) / 3 + 24px);
      .k-row-syllable {
        height: 25%;
      }
    }
    .k-block-3 {
      height: calc(75% - 2px);
      .k-row-syllable {
        height: 33.33%;
      }
    }
    .k-block-2 {
      height: calc(50% - 4px);
      .k-row-syllable {
        height: 50%;
      }
    }
  }

  .sym-pad {
    height: 100%;
    width: calc((100% - 64px) / 8 + 12px);
    padding: 4px 4px 8px 8px;
  }
</style>
